<template>
  <div v-if="bgArray" >
    <!-- 头部 -->
    <div class="hd-nav">
      <!-- 导航 -->
      <i @click="goback" class="iconfont icon-xiangzuo1 icon-1"></i>
      <p>{{ movieArray.nm }}</p>
      <i class="iconfont icon-shoucang icon-3 icon-active"></i>
      <i class="iconfont icon-fenxiang icon-2" @click="showShare = true"></i>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <!-- 内容区 -->
    <div class="movie-container">
      <!-- 地址，名字 -->
      <div class="movie-name">
        <div class="movie-item">
          <p>{{ movieArray.nm }}</p>
          <span>{{ movieArray.addr }}</span>
        </div>
        <i class="iconfont icon-xiangyou1 icon-4"></i>
        <i class="iconfont icon-didian icon-5"></i>
      </div>
      <!-- 折扣卡 -->
      <ul class="preferential">
        <li v-if="movieArray.vipInfo">
          <div class="info">
            <p>{{ movieArray.vipInfo.title }}</p>
            <span>{{ movieArray.vipInfo.desc }}</span>
          </div>
          <img :src="`${movieArray.vipInfo.icon}`" alt="" />
        </li>
      </ul>
      <!-- 影院正在上映的影片 -->
      <!-- :style="`background:url(${})`" -->
      <div class="film" v-if="filmArray">
        <div class="bg" :style="`background:url(${bgArray[tempId]}) `"></div>
        <div class="swiper-container" id="film" ref="mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              :style="`background:url(${fe.img.replace(
                /w.h/,
                '110.116'
              )}) no-repeat `"
              v-for="(fe, fi) in filmArray"
              :key="fi"
            >
              <!-- <img :src="`${fe.img.replace(/w.h/, '168.220')}`" alt="" /> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 影片名称，演员 -->
      <div class="film-autor">
        <p class="film-autor-item">
          {{ tempArray.nm }}
          <span class="item-score">{{
            tempArray.sc == "0.0" ? tempArray.wish : tempArray.sc
          }}</span>
          <span class="item-sc">{{
            tempArray.sc == "0.0" ? "人想看" : "分"
          }}</span>
        </p>
        <span class="film-autor-desc">{{ tempArray.desc }}</span>
      </div>
      <!-- 日期 -->
      <div>
        <comp-moviedate
          v-on:child-click="myRev"
          :movieDate="filmDateArray"
        ></comp-moviedate>
      </div>
      <!-- 当前日期，电影档期 -->
      <div class="schedule-movie">
        <comp-schedule
          :tempSche="tempArray"
          :schedule="playMovie"
        ></comp-schedule>
      </div>
    </div>
  </div>
</template>
<script>
import { ShareSheet, Toast } from "vant";

import compMoviedate from "../components/comp-moviedate.vue";
import compSchedule from "../components/comp-schedule.vue";
import Swiper from "swiper";
export default {
  name: "movieBuy",
  data() {
    return {
      tempArray: [], //当前 影片数据
      bgArray: [], //背景图片
      tempId: 0, //索引
      movieArray: [], //影院详情
      filmArray: [], //影院正在上映的影片
      filmDateArray: [], //当前 影片所有的日期
      dataChild: "", //当前 点击  日期
      playMovie: [], //当前 日期播放电影
      noPlayMovie: false, //当天没有 电影
      totalMinute: 0, //当前电影总分钟 总时长
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
      ],
    };
  },
  beforeRouteEnter(to, from, next) {
    let pro = axios.get("cinema/detail", {
      params: {
        cinemaId: to.query.deId,
      },
    });
    pro.then((res) => {
      next((vm) => vm.setData(res));
    });
    // console.log(to.query.deId);
  },
  components: {
    compMoviedate,
    compSchedule,
    [ShareSheet.name]: ShareSheet,
    [Toast.name]: Toast,
  },

  methods: {
    goback() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //  影院详情
    setData(res) {
      this.$nextTick(() => {
        this.movieArray = res;
        //   存值
        // sessionStorage.setItem("movieObj", JSON.stringify(this.movieArray));
        // //   取值
        // this.movieArray = JSON.parse(sessionStorage.getItem("movieObj"));
        // console.log("----影院详情---->", res, this.movieArray);
      });
    },
    setError(err) {
      console.log("---错误----", err);
    },
    // 提取背景图
    bgFun(k) {
      for (let i = 0; i < k.length; i++) {
        this.bgArray.push(k[i].img.replace(/w.h/, "110.116"));
      }
    },
    // 影院正在上映的影片
    getData(k) {
      let pro = axios.get("cinema/shows", {
        params: {
          cinemaId: k,
          ci: 1,
          channelId: 4,
        },
      });
      pro
        .then((res) => {
          this.filmArray = res.movies;
          console.log("影院正在上映的影片---", res);
          this.bgFun(this.filmArray);
          // 初始化
          // this.tempIdData();
          this.tempIdArr(0);
          let oneDate = this.filmArray[0].shows[0].showDate;
          // console.log('第一个日期---->',oneDate);
          // 初始化日期
          this.dataChild = oneDate;
          this.findDateMovie(oneDate, this.tempArray);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    // 把时间戳转换为正常时间
    toData(k) {
      let toTime = new Date(k);
      let y = toTime.getFullYear();
      let M = toTime.getMonth() + 1;
      let d = toTime.getDate();
      return y + "-" + M + "-" + d;
    },
    //  子传父  日期
    myRev(msg) {
      this.dataChild = msg;
      // 调用 根据日期查找对应的电影
      this.findDateMovie(msg, this.tempArray);
      console.log("-子传父---", msg, this.tempArray);
    },
    // 初始化  0
    tempIdData() {
      // this.filmDateArray = [];
      // // console.log("this.tempId-->", value);
      // this.tempArray = this.filmArray[0];
      // // 初始化
      // // console.log(" // this.totalMinute =", reg.exec(this.tempArray.desc)[0]);
      // let dates = this.filmArray[0].shows.length;
      // let obj = {};
      // obj = this.toData(new Date().getTime());
      // this.filmDateArray.push(obj);
      // //
      // for (let i = 0; i < dates; i++) {
      //   obj = this.filmArray[0].shows[i].showDate;
      //   this.filmDateArray.push(obj);
      // }
      // // 数组去重，----没有--排序
      // this.filmDateArray = Array.from(new Set(this.filmDateArray));
    },
    tempIdArr(value) {
      this.filmDateArray = [];
      // console.log("this.tempId-->", value);

      // 动态更新，当前电影页面数据
      this.tempArray = this.filmArray[value];
      this.findDateMovie(this.dataChild, this.tempArray);
      // console.log("当前影片数据---->", this.filmArray[value]);
      // console.log("当前影片数据---->", this.filmArray[value].shows.length);
      let dates = this.filmArray[value].shows.length;
      let obj = {};
      // 当天的时间
      obj = this.toData(new Date().getTime());
      this.filmDateArray.push(obj);

      // this.totalMinute = this.reg.exec(this.tempArray.desc)[0];
      // // 处理结束时间
      // this.minuteFormate('20:20');
      //
      for (let i = 0; i < dates; i++) {
        obj = this.filmArray[value].shows[i].showDate;
        this.filmDateArray.push(obj);
        // console.log(
        //   "当前影片的上映的时间--->",
        //   this.filmArray[value].shows[i].showDate
        // );
      }
      // 数组去重，----没有--排序
      this.filmDateArray = Array.from(new Set(this.filmDateArray));
    },
    // 根据日期查找对应的电影
    findDateMovie(k, d) {
      // console.log("-根据日期查找对应的电影--", k, d.shows);
      // 当前电影的数据  查
      for (let z = 0; z < d.shows.length; z++) {
        // console.log("---所有日期--->", z, d.shows[z]);
        if (k == d.shows[z].showDate) {
          this.playMovie = d.shows[z];
          // console.log("当前日期，影院---》",d.shows[z].showDate, this.playMovie);
          return;
        } else {
          // 当天没有该电影
          this.playMovie = false;
          // console.log(k, this.playMovie, "没有该电影档期");
        }
      }
    },
  },
  watch: {
    // 轮播图索引
    tempId(value) {
      this.tempIdArr(value);
    },
  },
  created() {
    this.getData(this.$route.query.deId);
  },
  mounted() {
    let _this = this;
    var swiper = new Swiper("#film", {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      observer: true,
      observeParents: true,
      on: {
        slideChange: function () {
          _this.tempId = this.activeIndex;
          console.log("--", _this.tempId);
        },
      },
    });
    //  console.log(this.$route.query.deId);
    console.log(this.$store.state.cinemaArray);
  },
};
</script>

<style lang="scss" scoped>
// 头部
.hd-nav {
  width: 100%;
  height: 44px;
  background: #dd403b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .icon-1 {
    font-size: 30px;
    margin-left: 10px;
    color: rgb(255, 255, 255);
  }
  .icon-2 {
    font-size: 28px;
    margin-right: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
  }
  .icon-3 {
    font-size: 30px;
    margin-right: 10px;
    color: rgb(255, 255, 255);
    //  font-weight: bold;
  }
  .icon-active {
    color: #ffab0f;
  }
  p {
    font-size: 22px;
    color: rgb(255, 255, 255);
    width: 60%;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
// 内容区
.movie-container {
  width: 100%;
  height: 100%;
  margin-top: 44px;
  //  <!-- 地址，名字 -->
  .movie-name {
    width: 352px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .movie-item {
      width: 77%;
      p {
        width: 100%;
        padding-top: 6px;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        display: block;
        width: 100%;
        font-size: 14px;
        color: #9d9d9d;
        padding: 6px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .icon-4 {
      margin: 0 6px;
      color: #c7c7c7;
    }
    .icon-5 {
      padding: 0 6px;
      font-size: 28px;
      color: #72aff2;
      border-left: 1px solid rgb(231, 231, 231);
    }
  }
  //   <!-- 折扣卡 -->
  .preferential {
    width: 352px;
    margin: 7px auto 30px;
    li {
      width: 130px;
      height: 46px;
      border-radius: 6px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: #fff7eb;
      .info {
        width: 60px;
        height: 46px;
        font-size: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          font-size: 14px;
          color: #ff9700;
          font-weight: bold;
        }
        span {
          display: block;
          width: 100%;
          font-size: 10px;
          color: #ff9700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      img {
        width: 30px;
        height: 36px;
      }
    }
  }
  // 影院正在上映的影片
  .film {
    width: 375px;
    height: 160px;
    position: relative;
    // background: #ccc;
    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url("https://img1.baidu.com/it/u=3427821080,1838386749&fm=26&fmt=auto")
        no-repeat 0 0;
      filter: blur(10px);
    }
    .swiper-container {
      z-index: 99;
      .swiper-wrapper {
        .swiper-slide {
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 300ms;
          transform: scale(0.8);
          width: 70px;
          height: 140px;
          background-size: contain;
        }
        .swiper-slide-active,
        .swiper-slide-duplicate-active {
          transform: scale(1);
          border: 1px solid rgb(255, 255, 255);
        }
      }
    }
  }
  // <!-- 影片名称，演员 -->
  .film-autor {
    width: 100%;
    height: 50px;
    font-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    .film-autor-item {
      font-size: 16px;
      .item-score {
        font-size: 18px;
        font-weight: bold;
        color: #ff9000;
      }
      .item-sc {
        font-size: 14px;
        color: #ff9000;
      }
    }
    .film-autor-desc {
      font-size: 12px;
      color: #c5c5c5;
    }
  }
}
</style>